<template>
  <div id="allUser">
    <div slot="header" class="clearfix">
          <span>BeijiRonin</span>
          <el-button
            style="float: right; margin-right: 10%"
            type="text"
            @click="load()">刷新</el-button>
    </div>
    <el-table 
    :data="datas" 
    style="width: 100%" 
    stripe id="all"     
    v-loading="loading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)">
      <el-table-column prop="id" label="索引"> </el-table-column>
      <el-table-column prop="name" label="昵称"> </el-table-column>
      <!-- <el-table-column label="头像">
        <template slot-scope="scope">
          <img
            style="width: 100%"
            :src="
              'https://api.yxing.site/messy_json/img?path=' + scope.row.avatar
            "
            alt=""
          />
        </template>
      </el-table-column> -->
      <el-table-column prop="college" label="专业"> </el-table-column>
      <el-table-column prop="password" label="密码"> </el-table-column>
      <el-table-column prop="phone" label="手机号"> </el-table-column>
      <el-table-column prop="realName" label="真实姓名"> </el-table-column>
      <el-table-column prop="scope" label="积分"> </el-table-column>
      <el-table-column prop="createTime" label="注册时间"> </el-table-column>
      <el-table-column prop="updateTime" label="更新时间"> </el-table-column>
    </el-table>

    <div class="toexcel">
      <a href="http://192.168.31.112:8084">
      <el-button 
          type="info" 
          round
          class="button" 
          style=" position:fixed; bottom:5px; right:175px">
          用户管理
      </el-button></a>  
    </div>
    
      <!--给按钮绑定事件-->
      <div class="toexcel">
          <el-button 
            @click="exportExcel" 
            type="info" 
            round
            class="button" 
            style=" position:fixed; bottom:5px; right:5px"
            >导出全部用户信息
          </el-button>
      </div>
  <!-- 分页 -->
        <!-- <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination> -->
  </div>
     
</template>

<script>
const axios = require('axios');
    // 引入导出Excel表格依赖
  import FileSaver from "file-saver";
  import XLSX from "xlsx";
export default {
  name: "allUser",
  data() {
    return {
      pageSize:'',
      datas: [],
      total:'',
      tableData: [],
    };
  },
  methods:{
    load() {
      this.loading = true;
      this.datas = [];
      this.axios
        .post(`http://localhost:4578/all_json/user`, {})
        .then((ret) => {
          this.datas = ret.data;
          this.loading = false;
        });
    },
    exportExcel() {
        /* 从表生成工作簿对象 */
        var wb = XLSX.utils.table_to_book(document.querySelector("#all"));
        /* 获取二进制字符串作为输出 */
        var wbout = XLSX.write(wb, {
            bookType: "xlsx",
            bookSST: true,
            type: "array"
        });
        try {
            FileSaver.saveAs(
            //Blob 对象表示一个不可变、原始数据的类文件对象。
            //Blob 表示的不一定是JavaScript原生格式的数据。
            //File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。
            //返回一个新创建的 Blob 对象，其内容由参数中给定的数组串联组成。
            new Blob([wbout], { type: "application/octet-stream" }),
            //设置导出文件名称
            "用户信息.xlsx"
            );
        } catch (e) {
            if (typeof console !== "undefined") console.log(e, wbout);
        }
        return wbout;
        },
    page(currentPage){
    const _this = this
    axios.get('http://localhost:8181/book/findAll/'+(currentPage-1)+'/10').then(function(resp){
      console.log(resp)
      _this.tableData = resp.data.content
      _this.pageSize = resp.data.size
      _this.total = resp.data.totalElements
    })
  },  
   created() {
    const _this = this
    axios.get('http://localhost:8181/book/findAll/0/10').then(function(resp){
      console.log(resp)
      _this.tableData = resp.data.content
      _this.pageSize = resp.data.size
      _this.total = resp.data.totalElements
    })
  },
  },
   mounted() {
    this.load();
  },
};
</script>
<style scoped>
.table {
    width: 100%;
    height: 300px;
    }
.toexcel {
  cursor: pointer;
  cursor: hand;
  width: 70px;
  height: 34px;
}
#cs{
  color: blueviolet;

}
.toexcel {
  cursor: pointer;
  cursor: hand;
  width: 70px;
  height: 34px;
}
</style>